import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image, ScrollView, Text } from '@tarojs/components'
import { AtNoticebar } from 'taro-ui'
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import dayjs from 'dayjs'
const redpacketImg = 'https://static3.jekunauto.com/img/others/redpacket-img.png'
const baobeiredpacketImg = 'https://static3.jekunauto.com/img/others/redpacket-img2.png'
import { getRedPacketDetails, getRedPacketData } from '@/api/redpacket'
import './index.scss'


interface State{
  tabIndex: number
  redpacketList: any
  redpacketInfo: any
  listLoaded: boolean
  allRedpacket: any
}

export default class Index extends Component {

  constructor(props) {
    super(props)
    this.state = {
      redpacketList: [],
      listLoaded: false,
      tabIndex: 1,
      redpacketInfo: {},
      allRedpacket: {}
    }
  }
  state: State
  UNSAFE_componentWillMount () {}
  componentDidMount () {}
  UNSAFE_componentWillReceiveProps (nextProps,nextContext) {}
  componentWillUnmount () {}
  componentDidShow () {
    getRedPacketData({
      type: 1
    }).then(res => {
      const data = res.data['data']
      this.setState({
        redpacketInfo: data
      })
    })
    getRedPacketData({
      type: 2
    }).then(res => {
      const data = res.data['data']
      this.setState({
        allRedpacket: data
      })
    })
    this.getRedPacketDetails()
  }
  componentDidHide () {}
  componentDidCatchError () {}
  componentDidNotFound () {}

  getRedPacketDetails(params = { type: 1,query:{ 'perPage': 100, }}) {
    getRedPacketDetails(params).then(res => {
      const data = res.data['data'].map(v => {
        return {
          ...v,
          startAt: dayjs.unix(v.startAt).format('YYYY-MM-DD'),
          endAt: dayjs.unix(v.endAt).format('YYYY-MM-DD')
        }
      })
      this.setState({
        listLoaded: true,
        redpacketList: data,
        tabIndex: params.type
      })
    })
  }

  tabData(i: number) {
    this.getRedPacketDetails({ type: i })
  }

	gotoUse=()=>{
		const {
      tabIndex
    } = this.state
		if(tabIndex == 1){
			Taro.switchTab({ url: '/pages/tabbar/index/index' })
		}
	}

  // 用户红包明细界面
  userRedpacketView() {
    const {
      redpacketInfo,
      allRedpacket
    } = this.state
    return (
      <View className='redpacket-hd'>
        <View className='redpacket-history' onClick={() => {Taro.navigateTo({url: '/pages/redpacket/list/index'})}}>
          <Iconfont size='38' color='#fff' name='icon-exclamation-circle-o'></Iconfont>
        </View>
        <View className='rule' onClick={() => {Taro.navigateTo({url: '/pages/redpacket/rule/index'})}}>
          红包规则
          <Iconfont size='20' color='#fff' name='icon-jiantourukou'></Iconfont>
        </View>
        <View className='price-cont'>
          <View className='li'>
            <View className='num'>￥{redpacketInfo.remainValue}</View>
            <View className='text'>可用红包</View>
          </View>
          <View className='li'>
            <View className='num'>￥{allRedpacket.originValue}</View>
            <View className='text'>红包总额</View>
          </View>
        </View>
        <View className='tips'>红包帮你省了{allRedpacket.saveValue}元</View>
      </View>
    )
  }

  // 用户红包类型列表
  userRedpacketListView() {
    const {
      redpacketList,
      listLoaded,
      tabIndex
    } = this.state
    return (
      <View className='redpacket-bd'>
        <ScrollView scrollY className='tab-cont'>
          {
            tabIndex === 2 &&
            <AtNoticebar icon='alert-circle' className='at-notice' >
             其它地区门店适用，请从首页切换城市后使用
            </AtNoticebar>
          }
          <View className='tab-cont-item'>
						{
              listLoaded &&  redpacketList.map(list => {
                return (
                  <View key={list.id} className={classnames('rbtab-cont-item-li', tabIndex === 2 && 'grayscale')} onClick={this.gotoUse}>
                    {list.expireSoon ? <View className='expireSoon-tips'>快过期</View> : null}
										{
											list && list.redPacketType == 4 ? <Image className='img' src={baobeiredpacketImg}></Image> : <Image className='img' src={redpacketImg}></Image>
										}
                    <View className={classnames('cont')}>
                      <View className='rb-price'>￥{list.remainValue} {list.redPacketType == 4 ? <View className='baobei-icon'>{list.redPacketTypeLabel}</View> : null}</View>
                      <View className='text'>{list.canUsedAreaLabel}</View>
                      <View className='text'>{`${list.startAt}~${list.endAt}`}</View>
                    </View>
                  </View>
                )
              })
            }
          </View>
          <View className='scroll-bt-tips'>没有更多记录啦</View>
        </ScrollView>
      </View>
    )
  }

  render() {
    const {
      tabIndex
    } = this.state

    return (
      <View className='redpacket-index'>
        <View className='redpacket-fixed-top'>
          {this.userRedpacketView()}
          <View className='tab-item'>
            <View onClick={() => {this.tabData(1)}} className={classnames('tab-li', tabIndex === 1 && 'act')}><View className='tab-li-text'>可用红包</View></View>
            <View onClick={() => {this.tabData(2)}}  className={classnames('tab-li', tabIndex === 2 && 'act')}><View className='tab-li-text'>不可用红包</View></View>
          </View>
        </View>
        {this.userRedpacketListView()}
      </View>
    )
  }

}
